<template>
  <div class="lookQa">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="中空伺服电机" name="1"></el-tab-pane>
      <el-tab-pane label="中空编码器" name="2"></el-tab-pane>
      <el-tab-pane label="关节减速电机" name="3"></el-tab-pane>
      <el-tab-pane label="机械臂" name="4"></el-tab-pane>
      <el-tab-pane label="通用调试器" name="5"></el-tab-pane>
      <div class="feedback">
        <div class="item" :key="index" v-for="(item, index) in 9">
          <div class="top">
            <div class="name">
              <div class="info3">
                <img class="photo" src="../assets/login/logo.png" alt="" />
                <span>匿名用户:</span>

                可以升级电机，把负载提高吗?
              </div>
              <div class="imgs">
                <el-image
                  style="width: 100px; height: 70px"
                  :src="url"
                  :preview-src-list="srcList"
                >
                </el-image>
                <img
                  style="
                    width: 100px;
                    height: 70px;
                    margin-left: 15px;
                    cursor: pointer;
                  "
                  @click="vadioPlay"
                  src="../assets/2pxicon_video1_s.png"
                  alt=""
                />
              </div>
            </div>
            <div class="time">2014-01-11 13:30:30</div>
          </div>
        </div>
      </div>
    </el-tabs>

    <el-dialog
      v-if="dialogVisible1"
      title="播放视频"
      :visible.sync="dialogVisible1"
      width="70%"
    >
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      >
      </video-player>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible1 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getissuelist } from "../apis/index";
export default {
  name: "lookQa",
  components: {},
  data() {
    return {
      infBox:null,
      activeName: "1",
      playerOptions: {
        playbackRates: [1.0, 2.0, 3.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:8", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "http://public-read-shengmu.oss-cn-beijing.aliyuncs.com/image/icon2/dfvideo.mp4",
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      },
      dialogVisible1: false,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  computed: {},
  created() {
    this.getlist()
  },
  methods: {
    getlist(){
      

      getissuelist({
        nameType:'',
        isSearchMe:1
      })
      .then((res) => {
        this.infBox = res.data.data;
        console.log(this.infBox, 333);
      })
      .catch(() => {});
    },
    vadioPlay() {
      this.dialogVisible1 = true;
      // console.log(this.$refs.videoPlayer)
    },
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
.lookQa {
  .feedback {
    .item {
      border-bottom: 1px solid #dfdede;
      margin-bottom: 15px;
      .top {
        // padding: 20px 0;
        display: flex;
        // align-items: center;
        justify-content: space-between;
        .name {
          .info3 {
            align-items: center;
            display: flex;
            color: #323232;
            font-size: 14px;
            span {
              font-weight: bold;
              font-size: 14px;
            }
          }
          .imgs {
            margin: 15px 0;
          }
        }
        .time {
          font-size: 13px;
          color: #999;
        }
        .photo {
          border: 1px solid #323232;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>